import React, { Component } from 'react'
import { Modal, Input, Form, message } from 'antd'
import { addRole } from '@/api/role-api.js'
class add extends Component {
  state = {
    visible: false,
    confirmLoading: false,
    roleName: null,
  }

  showModal = () => {
    this.setState({
      visible: true,
    })
  }

  handleOk = () => {
    this.setState({
      confirmLoading: true,
    })
    addRole(this.state.roleName).then((v) => {
      if (v.status == 0) {
        message.success('保存成功')
        this.setState({
          visible: false,
          confirmLoading: false,
        })
      } else {
        message.error(v.msg || '保存失败')
      }
      this.props.getList()
    })
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    })
  }
  change = (e) => {
    this.setState({
      roleName: e.target.value,
    })
  }
  render() {
    const { visible, confirmLoading } = this.state
    return (
      <Modal
        title="Title"
        visible={visible}
        onOk={this.handleOk}
        confirmLoading={confirmLoading}
        onCancel={this.handleCancel}
      >
        <Form.Item
          label="角色名称："
          wrapperCol={{ offset: 4 }}
          labelCol={{ span: 4 }}
          style={{ marginBottom: '0' }}
        >
          <Input value={this.state.roleName} onChange={this.change} />
          <div
            style={{
              display: this.state.roleName ? 'none' : 'block',
              color: 'red',
            }}
          >
            这是必填项
          </div>
        </Form.Item>
      </Modal>
    )
  }
}

export default add
